<template>
    <div class="divBox">
        <el-card class="box-card">

            <div class="box-header">
                <div>
                    <el-button size="mini" @click="showDiag">添加</el-button>
                    <el-button type="primary" size="mini" @click="getData()">刷新</el-button>
                </div>

                <div class="dis_flex flex_center_left">

                    <div class="m-right-15">状态:
                        <el-select v-model="statusValue" placeholder="选择" clearable size="mini" style="width: 80px;">
                            <el-option v-for="item in statusArr" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>

                    :
                    <div class="m-right-15">账号类型:
                        <el-select v-model="zhanghaoType" placeholder="选择" size="mini" style="width: 80px;"
                            @change="selectAccount2">
                            <el-option v-for="item in accountTypeOptions" :key="item.value" :label="item.label"
                                size="mini" :value="item.value">
                            </el-option>
                        </el-select>
                    </div>

                    <!-- 子组件没有及时更新账号类型(解决) ， 实盘账号名称没有回显，接口响应的数据字段不一致  -->
                    <div class="m-right-15 search_wh">
                        <UserSearchable ref="user2" v-model="zhanghaotId" :type="'getMasterAccountType'"
                            :params="{ traderAccountType: zhanghaoType, followType: 1, status: 1 }">
                            <template #dropdownTitle>
                                <span>id</span>
                                <span>昵称</span>
                                <span>权限</span>
                            </template>
                            <template v-slot:dropdown="{ item }">
                                <span v-show="zhanghaoType == 2" class="span_wh">
                                    <span>{{ item.id }}</span>
                                    <span>{{ item.nickName }}</span>
                                    <span>{{ item.dataFactoryName }}</span>
                                </span>
                                <span v-show="zhanghaoType == 1" class="span_wh">
                                    <span>{{ item.id }}</span>
                                    <span>{{ item.account }}</span>
                                    <span>{{ item.adminName }}</span>
                                </span>
                            </template>

                        </UserSearchable>
                    </div>


                    <!-- <div class="m-right-15">实盘账号:
                        <el-select v-model="value" placeholder="请选择" size="mini" clearable>
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="m-right-15">模拟账号:
                        <el-select v-model="value2" placeholder="请选择" size="mini" clearable>
                            <el-option v-for="item in options2" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div> -->

                    <div>
                        <el-button size="mini" @click="searchData">查询</el-button>
                        <el-button size="mini" @click="buttonStart">一键开启</el-button>
                        <el-button size="mini" @click="buttonEnd">一键关闭</el-button>
                    </div>
                </div>
            </div>

            <el-table border :data="tableData" border style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'font-weight': 'bold' }" @select="selctTable"
                @select-all="slectTableAll">
                <el-table-column type="selection" align="center" label="全选" min-width="80">
                </el-table-column>
                <el-table-column prop="dataFactoryName" align="center" label="数据场" min-width="120">
                </el-table-column>
                <el-table-column prop="userName" align="center" label="跟单账号" min-width="180">
                </el-table-column>
                <el-table-column prop="traderAccountType" align="center" label="账号类型" min-width="80">
                    <template slot-scope="scope">
                        <span v-if="scope.row.traderAccountType == 1">实盘</span>
                        <span v-if="scope.row.traderAccountType == 2">模拟</span>
                    </template>
                </el-table-column>
                <el-table-column prop="followUserName" label="被跟单账号" align="center" min-width="180">
                </el-table-column>
                <el-table-column prop="strategyWay" label="跟单方式" align="center" min-width="100">
                    <template slot-scope="scope">
                        <span v-if="scope.row.strategyWay == 1">自动订阅</span>
                    </template>
                </el-table-column>
                <el-table-column prop="multiple" label="跟单倍数" align="center" min-width="150">
                </el-table-column>
                <el-table-column prop="strategy" label="跟单方向" align="center" min-width="80">
                    <template slot-scope="scope">
                        <span v-if="scope.row.strategy == 1">正</span>
                        <span v-if="scope.row.strategy == 2">反</span>
                    </template>
                </el-table-column>
                <el-table-column prop="restrict" label="限制多空" align="center" min-width="80">
                    <template slot-scope="scope">
                        <span v-if="scope.row.restrict == 0">不限</span>
                        <span v-if="scope.row.restrict == 1">多</span>
                        <span v-if="scope.row.restrict == 2">空</span>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" align="center" min-width="60">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status == 1" class="color_green">开启</span>
                        <span v-if="scope.row.status == 2" class="color_red">关闭</span>
                    </template>
                </el-table-column>

                <el-table-column prop="" align="center" label="操作" min-width="220">

                    <template slot-scope="scope">
                        <div>
                            <el-button type="primary" size="mini" @click="updateAcountInfo(scope.row)">修改</el-button>
                            <el-button :type="scope.row.status == 1 ? 'success' : 'danger'" size="mini"
                                @click="statusButton(scope.row)">{{ scope.row.status == 1 ? '开启' : '关闭' }}</el-button>
                            <el-button type="danger" size="mini" @click="deleteButton(scope.row)">删除</el-button>
                        </div>
                    </template>


                </el-table-column>
            </el-table>

            <div class="block m-bottom-15">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="limit"
                    layout="total, sizes, prev, pager, next" :total="total">
                </el-pagination>
            </div>
        </el-card>


        <!-- 新增/修改 弹窗 -->
        <el-dialog :title="flagType == '1' ? '添加' : '修改'" :visible.sync="dialogVisible" width="35%" top="10vh">
            <div class="dialog_box">
                <div class="flex_center">
                    <div class="box_left"><span>*</span><span>账号类型</span></div>
                    <div>
                        <el-select v-model="followObj.traderAccountType" placeholder="请选择" class="m_right_15"
                            @change="selectAccount" :disabled="flagType == '1' ? false : true">
                            <el-option v-for="item in accountTypeOptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="flex_center">
                    <div class="box_left"><span>*</span><span>跟单账号</span></div>
                    <!-- @focus="dialogVisible2 = true" -->
                    <div>
                        <!-- <UserSearchable v-model="followObj.traderAccountId" :label="followObj.userName"
                            :type="'traderaccount'" :params="{ traderAccountType: followObj.traderAccountType }">
                            <template v-slot:dropdown="{ item }">
                                <span>{{ item.id }}</span>
                                <span>{{ item.nickName }}</span>
                                <span>{{ item.dataFactoryName }}</span>
                            </template>
                        </UserSearchable> -->


                        <!-- :disabled='flagType ==1?"false":"true"' -->
                        <UserSearchable ref="user" v-model="followObj.traderAccountId" :label="followObj.userName"
                            :type="'getMasterAccountType'"
                            :params="{ traderAccountType: followObj.traderAccountType, followType: 1, status: 1 }"
                            :disabled="flagType == 1 ? false : true">
                            <template #dropdownTitle>
                                <span>id</span>
                                <span>昵称</span>
                                <span>权限</span>
                            </template>
                            <template v-slot:dropdown="{ item }">
                                <span v-show="followObj.traderAccountType == 2" class="span_wh">
                                    <span>{{ item.id }}</span>
                                    <span>{{ item.nickName }}</span>
                                    <span>{{ item.dataFactoryName }}</span>
                                </span>
                                <span v-show="followObj.traderAccountType == 1" class="span_wh">
                                    <span>{{ item.id }}</span>
                                    <span>{{ item.account }}</span>
                                    <span>{{ item.adminName }}</span>
                                </span>
                            </template>
                        </UserSearchable>


                        <!-- <el-input v-model="followObj.traderFollowName" placeholder="跟单账号"></el-input> -->
                        <!-- <el-select v-model="selectedUser"   class="selWidth" clearable
                            placeholder="请选择"
                            @change="selectUser">
                            <el-option v-for="user in followAcount" :key="user.id" :label="user.userName" :value="user.id">
                                <div class="userItem">
                                    <span>{{ user.id }}&nbsp;</span>
                                    <span>{{ user.nickName }}&nbsp;</span>
                                    <span>{{ user.phone }}</span>
                                </div>
                            </el-option>
                        </el-select> -->
                    </div>
                </div>
                <div class="flex_center">
                    <div class="box_left"><span>*</span><span>交易员信号</span></div>

                    <!-- 修改成下拉框 -->
                    <div>

                        <!-- <el-input v-model="tradeIdObj2.userName" @focus="getTradedata()" placeholder="交易员信号"></el-input> -->

                        <UserSearchable v-model="followObj.traderSignalId" :type="'tradersignal'">
                            <template #dropdownTitle>
                                <span>id</span>
                                <span>昵称</span>
                                <span>权限</span>
                            </template>
                            <template v-slot:dropdown="{ item }">
                                <span>{{ item.id }}</span>
                                <span>{{ item.userName }}</span>
                                <span>{{ item.dataFactoryName }}</span>
                            </template>
                        </UserSearchable>
                    </div>
                </div>
                <div class="flex_center">
                    <div class="box_left"><span>*</span><span>跟单倍数</span></div>
                    <div><el-input v-model="followObj.multiple" placeholder="跟单倍数"></el-input></div>
                </div>

                <div class="flex_center">
                    <div class="box_left"><span>*</span><span>跟单方向</span></div>
                    <div>
                        <el-select v-model="followObj.strategy" placeholder="请选择" class="m_right_15"
                            @change="selectStrate">
                            <el-option v-for="item in strategyOptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="flex_center">
                    <div class="box_left"><span>*</span><span>限制多空</span></div>
                    <div>
                        <el-select v-model="followObj.restrict" placeholder="请选择" class="m_right_15"
                            @change="selectRest">
                            <el-option v-for="item in restrictOptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="flex_center">
                    <div class="box_left"><span>*</span><span>状态</span></div>
                    <div>
                        <el-radio-group v-model="followObj.status">
                            <el-radio :label="1">开启</el-radio>
                            <el-radio :label="2">关闭</el-radio>
                        </el-radio-group>
                    </div>
                </div>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveAdd">确 认</el-button>
            </span>
        </el-dialog>

        <!-- 二级弹窗 -->
        <el-dialog title="请选择" :visible.sync="dialogVisible2" width="50%" top="10vh">

            <div class="flex_left">
                <el-input v-model="diaAcountName" placeholder="请输入账户名称" size="small" class="input-wh"></el-input>
                <!-- <el-input v-model="diaAcountPhone" placeholder="请输入电话号码" size="small" class="input-wh"></el-input> -->
                <el-button icon="el-icon-search" size="small" @click="searchdiaAcount">搜索</el-button>
            </div>

            <el-table border ref="singleTable" :data="tableData2" highlight-current-row @row-click="handleSelct2"
                style="width: 100%" max-height="450">
                <el-table-column prop="id" label="信号ID" min-width="100">
                </el-table-column>
                <el-table-column prop="userName" label="账户名称" min-width="100">
                </el-table-column>
                <!-- <el-table-column prop="phone" label="电话号码" min-width="100">
                </el-table-column> -->
            </el-table>

            <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
                :current-page="currentPage2" :page-sizes="[10, 20, 30, 40]" :page-size="limit2"
                layout="total, sizes, prev, pager, next" :total="total2">
            </el-pagination>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="saveTradeIds">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 删除模态框 -->
        <el-dialog title="删除" :visible.sync="dialogVisible3" width="20%" top="10vh">

            <h2 class="delete_title">您确定要<span class="color_red_delete">删除</span>吗？</h2>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible3 = false">取 消</el-button>
                <el-button type="primary" @click="sureDelete()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
// import echarts from 'echarts';


import UserSearchable from "@/components/UserSearchable";
import { tradeSign, getTradeFollowList, getTradeSignList, getTMyList, addTraderfollow, updateTraderfollow, delTraderfollow, updateBatchByIds } from '@/api/user'


export default {

    data() {
        return {


            // 饼图数据
            pieData: [],

            tableData: [],
            tableData2: [],
            // 分页
            currentPage: 1,
            total: 0,
            limit: 10,

            currentPage2: 1,
            total2: 0,
            limit2: 10,



            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }],
            value: '',

            options2: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }],
            value2: '',

            statusArr: [{
                value: 1,
                label: '开启'
            }, {
                value: 2,
                label: '关闭'
            }],
            statusValue: '',

            // 弹窗
            dialogVisible: false,
            dialogVisible2: false,
            dialogVisible3: false,
            followObj: {
                "createBy": "",
                "createTime": "",
                "delBy": "",
                "delFlag": "",
                "delTime": "",
                "followType": 1,
                "id": "",
                "multiple": "",
                "remark": "",
                "restrict": "",
                "status": "",
                "strategy": "",
                "strategyWay": 1,
                "traderAccountId": "",
                "traderAccountType": 2,
                "traderFollowName": "",
                "traderSignalId": "",
                "updateBy": "",
                "updateTime": ""
            },
            strategyOptions: [
                {
                    value: 1,
                    label: '正'
                }, {
                    value: 2,
                    label: '反'
                }
            ],
            restrictOptions: [
                {
                    value: 0,
                    label: '不限'
                }, {
                    value: 1,
                    label: '多'
                },
                {
                    value: 2,
                    label: '空'
                },
            ],
            statusOptions: [
                {
                    value: 1,
                    label: '开启'
                }, {
                    value: 2,
                    label: '关闭'
                }
            ],
            accountTypeOptions: [
                {
                    value: 1,
                    label: '实盘'
                }, {
                    value: 2,
                    label: '模拟'
                }
            ],

            zhanghaoType: 2,

            zhanghaotId: "",

            diaAcountName: "",

            tradeIdObj: {},
            tradeIdObj2: {},


            followAcount: [],

            selectedUser: "",

            flagType: '',

            ids: "",

            statusEnum: '',

            buttonArr: []


        }
    },
    mounted() {

        this.getData()

        // this.getMoList()

    },
    components: {
        UserSearchable
    },
    methods: {
        // 数据请求
        getData() {
            let that = this;
            let obj = {};

            obj.limit = that.limit;
            obj.page = that.currentPage;
            // 跟单类型 1传统
            obj.followType = 1

            getTradeFollowList(obj).then(res => {

                // console.log(res)
                that.limit = res.limit
                that.total = res.total
                that.currentPage = res.page
                that.tableData = res.list;


            }).catch(err => {
                console.log(err)
            })
        },


        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            let that = this;
            that.limit = val;
            that.getData();

        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            let that = this;
            that.currentPage = val;
            that.getData()

        },

        handleSizeChange2(val) {
            console.log(`每页 ${val} 条`);
            let that = this;
            that.limit2 = val;
            that.getTradedata();

        },
        handleCurrentChange2(val) {
            console.log(`当前页: ${val}`);
            let that = this;
            that.currentPage2 = val;
            that.getTradedata()

        },

        handleSelct2(val) {
            let that = this;
            let obj = {}
            obj.traderSignalId = val.id
            obj.userName = val.userName

            console.log('当前交易对象ID:', obj)
            that.tradeIdObj = obj

            // that.dialogVisible2=false;
        },
        saveTradeIds() {
            let that = this;
            that.tradeIdObj2 = that.tradeIdObj;
            console.log(that.tradeIdObj2)
            that.dialogVisible2 = false;



        },

        // 获取信号员接口
        getTradedata() {
            let that = this;

            let obj = {};

            obj.limit = that.limit2;
            obj.page = that.currentPage2;

            getTMyList(obj).then(res => {
                console.log(res)

                that.limit2 = res.limit
                that.total2 = res.total
                that.currentPage2 = res.page

                that.tableData2 = res.list;

                that.dialogVisible2 = true;

            }).catch(err => {
                console.log(err)
            })
        },

        // 获取模拟数据接口
        getMoList() {
            let that = this;
            getTradeSignList().then(res => {
                console.log('模拟盘数据', res)

                that.followAcount = res.list;


            }).catch(err => {
                console.log(err)
            })
        },

        selectUser(e) {
            console.log('当前选中', e)
            let that = this;
            that.selectedUser = e
        },

        // 选择框
        selectAccount(e) {
            // console.log('当前选择:' + e)
            // this.followObj.traderAccountType = e;
            this.followObj.traderAccountId = "";
            // console.log('当前选择表格下标1实盘，2模拟:' + this.followObj.traderAccountType)
            // this.$refs.user.remoteMethod()
            this.$nextTick(() => {
                this.$refs.user.remoteMethod();
                this.$refs.user.setLabelValue()
            });
        },
        selectAccount2(e) {
            // console.log('当前选择表格下标1实盘，2模拟:' + e)
            // this.zhanghaoType = e;
            this.zhanghaotId = "";
            // console.log('当前选择表格下标1实盘，2模拟:' + this.zhanghaoType)
            // this.$refs.user2.remoteMethod()
            this.$nextTick(() => {
                this.$refs.user2.remoteMethod();
                this.$refs.user2.setLabelValue()
            });

        },
        selectStrate(e) {
            console.log('当前选择2:' + e)
        },
        selectRest(e) {
            console.log('当前选择3:' + e)
        },


        searchdiaAcount() {
            let that = this;
            console.log('查询:', that.diaAcountName)
            let obj = {}
            obj.userName = that.diaAcountName;

            getTMyList(obj).then(res => {
                console.log('查询成功', res)
                that.limit2 = res.limit
                that.total2 = res.total
                that.currentPage2 = res.page
                that.tableData2 = res.list

            }).catch(err => {
                console.log(err)
            })
        },

        saveAdd() {
            let that = this;
            let obj = JSON.parse(JSON.stringify(that.followObj))
            // obj.traderSignalId=[]
            // obj.traderSignalId.push(that.tradeIdObj2.traderSignalId)


            // 跟单账号id traderAccountId
            // 交易员信号id traderSignalId
            console.log(obj)


            if (that.followObj.traderAccountType == "") {
                that.$message.warning('请选择账号类型！')
                return
            }
            if (that.followObj.traderAccountId == "") {
                that.$message.warning('请选择跟单账号！')
                return
            }
            // console.log(that.tradeIdObj2.userName)
            // if (that.tradeIdObj2.userName == "" || that.tradeIdObj2.userName == undefined) {
            //     that.$message.warning('请选择交易员信号！')
            //     return
            // }
            if (that.followObj.traderSignalId == "") {
                that.$message.warning('请选择交易员信号！')
                return
            }
            if (that.followObj.multiple == "") {
                that.$message.warning('请输入跟单策略！')
                return
            }
            if (that.followObj.strategy == "") {
                that.$message.warning('请选择跟单方向！')
                return
            }
            // if(that.followObj.restrict==""){
            //     that.$message.warning('请选择限制！')
            //     return
            // }
            if (that.followObj.status == "") {
                that.$message.warning('请选择状态！')
                return
            }

            // return;



            // 添加接口
            if (that.flagType == 1) {

                // obj.traderSignalId = []
                // obj.traderSignalId.push(that.followObj.traderSignalId)
                // obj.traderSignalId=that.tradeIdObj2.traderSignalId
                obj.traderSignalId=[that.followObj.traderSignalId]
                console.log('99999999',obj)

                // return

                addTraderfollow(obj).then(res => {
                    console.log('添加成功', res)
                    that.$message.success('添加成功!')
                    that.getData()
                    that.dialogVisible = false;

                    that.followObj = {}

                }).catch(err => {
                    console.log(err)
                })
            }
            // 修改接口
            if (that.flagType == 2) {


                // obj.traderSignalId = []
                // obj.traderSignalId.push(that.tradeIdObj2.traderSignalId)



                // 有push的bug

                obj.traderSignalId=[that.followObj.traderSignalId]

                updateTraderfollow(obj).then(res => {
                    console.log('修改成功', res)
                    that.$message.success('修改成功!')
                    that.getData()
                    that.dialogVisible = false;

                    that.followObj = {}

                }).catch(err => {
                    console.log(err)
                })
            }

        },

        showDiag() {
            let that = this;
            let obj = {
                "createBy": "",
                "createTime": "",
                "delBy": "",
                "delFlag": "",
                "delTime": "",
                "followType": 1,
                "id": "",
                "multiple": "",
                "remark": "",
                "restrict": "",
                "status": "",
                "strategy": "",
                "strategyWay": 1,
                "traderAccountId": "",
                "traderAccountType": 2,
                "traderFollowName": "",
                "traderSignalId": null,
                "updateBy": "",
                "updateTime": ""
            }
            that.followObj = obj;

            that.tradeIdObj = {}
            that.tradeIdObj2 = {}


            that.flagType = 1;

            that.dialogVisible = true;
        },


        // 修改弹窗
        updateAcountInfo(obj) {
            let that = this;
            console.log(obj)

            that.flagType = 2;


            that.tradeIdObj = {}

            that.tradeIdObj2.userName = obj.followUserName[0];
            that.tradeIdObj2.traderSignalId = obj.traderSignalId[0];

            // console.log(that.tradeIdObj2)
            // return




            that.followObj = JSON.parse(JSON.stringify(obj));
            that.dialogVisible = true;

        },

        // 状态启动/关闭  有???
        statusButton(obj) {
            let that = this;

            console.log(obj)
            if (obj.status == 1) {
                obj.status = 2
            } else {
                obj.status = 1
            }
            updateTraderfollow(obj).then(res => {
                console.log('修改成功', res)
                that.$message.success('修改成功!')
                that.getData()
            }).catch(err => {
                console.log(err)
            })
        },

        // 删除
        deleteButton(obj) {
            let that = this;
            console.log(obj)

            that.ids = obj.id
            that.dialogVisible3 = true;
        },
        sureDelete() {
            let that = this;
            let arr = []
            arr.push(that.ids)
            // console.log(arr)
            // return
            delTraderfollow(arr).then(res => {

                that.$message.success('删除成功!')
                that.dialogVisible3 = false;
                that.getData()
            }).catch(err => {
                console.log(err)
            })
        },

        // 搜索查询
        searchData() {
            let that = this;
            console.log('状态:' + that.statusValue, '账号类型:' + that.zhanghaoType, '账号id:' + that.zhanghaotId)

            let obj = {}
            obj.status = that.statusValue;
            obj.traderAccountType = that.zhanghaoType;
            obj.traderAccountId = that.zhanghaotId;
            obj.followType = 1;


            getTradeFollowList(obj).then(res => {
                // console.log(res)
                that.limit = res.limit
                that.total = res.total
                that.currentPage = res.page
                that.tableData = res.list;

            }).catch(err => {
                console.log(err)
            })
        },

        //一键开启
        selctTable(selection) {
            let that = this;
            console.log(selection)

            that.buttonArr = selection

        },
        slectTableAll(selection) {
            let that = this;
            console.log(selection)
            that.buttonArr = selection
        },

        buttonStart() {
            let that = this;
            console.log('一键开启')

            // that.statusEnum = 1;
            let obj = {}
            obj.statusEnum = 1;

            console.log(that.buttonArr)
            if (that.buttonArr.length < 1) {
                that.$message.warning('请至少选中一个！')
                return
            }

            let arr = []
            for (var i = 0; i < that.buttonArr.length; i++) {
                // console.log(that.buttonArr[i].id)
                arr.push(that.buttonArr[i].id)
            }
            // console.log(arr)
            obj.ids = arr
            updateBatchByIds(obj).then(res => {
                console.log(res)
                that.$message.success('开启成功！')
                that.getData()
            }).catch(err => {
                console.log(err)
            })
        },
        buttonEnd() {
            let that = this;
            console.log('一键关闭')

            // that.statusEnum = 1;
            let obj = {}
            obj.statusEnum = 2;

            console.log(that.buttonArr)
            if (that.buttonArr.length < 1) {
                that.$message.warning('请至少选中一个！')
                return
            }

            let arr = []
            for (var i = 0; i < that.buttonArr.length; i++) {
                // console.log(that.buttonArr[i].id)
                arr.push(that.buttonArr[i].id)
            }
            // console.log(arr)
            obj.ids = arr
            updateBatchByIds(obj).then(res => {
                console.log(res)
                that.$message.success('关闭成功！')
                that.getData()
            }).catch(err => {
                console.log(err)
            })
        }



    },
    watch: {
        zhanghaoType(newValue, oldValue) {
            // console.log('监听当前选择表格下标1实盘，2模拟:',newValue)
            // this.zhanghaoType = newValue
            // console.log('监听当前选择表格下标1实盘，2模拟:',this.zhanghaoType)
            // this.$refs.user2.remoteMethod()
        },


        'followObj.traderAccountType': {
            handler(newValue, oldValue) {
                // console.log('监听当前选择表格下标1实盘，2模拟:', newValue);
                // this.followObj.traderAccountType = newValue;
                // console.log('当前的交易id:', this.followObj.traderAccountType)
                // this.$refs.user.remoteMethod()
            },
        }
    }
}
</script>

<style scoped lang="scss">
.sectionPie {
    display: flex;
    justify-content: center;
}

.box-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.dis_flex {
    display: flex;
}

.m-right-15 {
    margin-right: 15px;

    text-align: center;
    font-weight: bold;
}



.dialog_box {
    padding: 10px;
}

.flex_center {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    // width: 100%;
}

.flex_center>div {
    width: 30%;
}

.flex_center div:last-child {
    width: 85%;
}

.color_green {
    color: #13ce66;
}

.color_red {
    color: #ff4949;
}

.box_left span:first-child {
    color: red;
    margin-right: 3px;
}

.delete_title {
    text-align: center;
    font-size: 18px;
}

.color_red_delete {
    color: red;
    margin: 0 10px;
    font-weight: bold;
}

.box_left span:last-child {
    font-weight: bold;
}

.flex_left {
    display: flex;
    justify-content: flex-start;
}

.input-wh {
    width: 200px;
    text-align: center;
    margin-right: 15px;
}

.flex_center_left {
    align-items: center;
}

.span_wh {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
</style>
